<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="../plugins/jquery-2.1.0.js"></script>
		<script src="../plugins/element-ui/vue.js"></script>
		<script src="../plugins/element-ui/index.js"></script>
		<script src="../plugins/ComUtil.js"></script>

		<link rel="stylesheet" href="../plugins/element-ui/index.css" />
		<link rel="stylesheet" href="css/mainIndex.css" / >
		<script src="../plugins/layer/layer.js"></script>
		<script src="configset/configset.js"></script>
		
		<script src="js/m_index.js"></script>
		<title>首页</title>

		<style>
			body,
			html {
				width: 100%;
				height: 100%;
			}
			
			.time {
				font-size: 13px;
				color: #999;
			}
			
			.bottom {
				margin-top: 13px;
				line-height: 12px;
			}
			
			.button {
				padding: 0;
				float: right;
			}
			
			.image {
				width: 100%;
				display: block;
			}
			
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}
			
			.clearfix:after {
				clear: both
			}
			
			.clo_block {
				margin: 0px;
				padding-left: 20px;
				padding-right: 20px;
				margin-bottom: 25px;
			}
			
			.el-card__body {
				padding: 0px;
			}
			
			.card_btm {
				padding: 15px;
			}
			
			.clo_card:hover {
				-webkit-box-shadow: 0 4px 16px 0 rgb(0 0 255 / 30%);
				box-shadow: 0 4px 16px 0 rgb(0 0 255 / 30%);
				cursor: pointer;
			}
			
			.del_img {
				height: 100%;
				width: 100%;
				overflow: hidden;
			}
			
			.image {
				transition: all .5s;
			}
			
			.image:hover {
				transform: scale(1.25, 1.5);
			}
		</style>
	</head>

	<body>
		<div id="mimage_v">
			<el-row>
				<el-col :span="6" class="clo_block" v-for="(imdata, index) in file_data" >
					<el-card class="clo_card">
						<div class="del_img">
							<img :src="imdata.file_URL" class="image"></div>
						<div class="card_btm">
							<span>风玲</span>
							<div class="bottom clearfix">
								<time class="time"></time>
								<el-button type="text" class="button">操作按钮</el-button>
							</div>
						</div>
					</el-card>

					<div class="block" style="margin-top:10px; " v-if="files_total > 10 ">
						<el-pagination v-bind:current-page.sync="file_page" 
							v-bind:page-sizes="[10, 20, 30, 100]" 
							v-bind:page-size="file_size" 
							@size-change="Change_fileSize" 
							@current-change="Change_filepage" 
							layout="total, sizes, prev, pager, next, jumper" 
							v-bind:total="file_total">
						</el-pagination>
					</div>
				</el-col>

			</el-row>
		</div>
		<script>
			var mi = new m_index();
			mi.init();
			$(".del_img").off('click');
			$(".del_img").on('click', function() {
				var deimg = '<div class="del_img" style="height: 100%;width: 100%;overflow: hidden;">' + $(this).html() + '</div》';
				parent.layer.open({
					type: 1,
					title: false,
					closeBtn: 0,
					area: ['55%', '65%'],
					skin: 'layui-layer-nobg', //没有背景色
					shadeClose: true,
					content: deimg
				});
			})
		</script>
	</body>

</html>